<script lang="ts" setup>
  import { SmileOutlined } from '@ant-design/icons-vue';
  import Timeline from '@sscd/timeline';
</script>

<template>
  <div class="demo">
    <div class="demo-title">圆圈颜色</div>
    <div class="demo-content">
      <Timeline>
        <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
        <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
        <Timeline.Item color="red">
          <p>Solve initial network problems 1</p>
          <p>Solve initial network problems 2</p>
          <p>Solve initial network problems 3 2015-09-01</p>
        </Timeline.Item>
        <Timeline.Item>
          <p>Technical testing 1</p>
          <p>Technical testing 2</p>
          <p>Technical testing 3 2015-09-01</p>
        </Timeline.Item>
        <Timeline.Item color="gray">
          <p>Technical testing 1</p>
          <p>Technical testing 2</p>
          <p>Technical testing 3 2015-09-01</p>
        </Timeline.Item>
        <Timeline.Item color="gray">
          <p>Technical testing 1</p>
          <p>Technical testing 2</p>
          <p>Technical testing 3 2015-09-01</p>
        </Timeline.Item>
        <Timeline.Item color="#00CCFF">
          <template #dot>
            <SmileOutlined />
          </template>
          <p>Custom color testing</p>
        </Timeline.Item>
      </Timeline>
    </div>
  </div>
</template>
